<template>
  <el-container>
    <el-aside width="200px">
      <el-menu background-color="#545c64" text-color="#fff" active-text-color="rgb(64, 158, 255)"
               class="el-menu-vertical-demo" :router="true" :default-active="$route.path">
        <el-menu-item index="/index">
          <i class="el-icon-s-home"></i><span>首页</span>
        </el-menu-item>
        <el-submenu v-for="menu in menuList" :index="menu.route ? menu.route : '/index'" :key="menu.menuId">
          <template slot="title"><i :class="menu.icon"></i>{{menu.menuName}}</template>
          <el-menu-item v-for="c in menu.children" :index="c.route" :key="c.menuId">
            <i :class="c.icon"></i>{{c.menuName}}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container style="height: 100%; margin-left: 200px;">
      <el-header>
        <el-dropdown @command="handleCommand">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{username}}</span>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex'
import { logout } from '@/api/auth'
import { removeLoginUser, getLoginUser } from '@/utils/storage'
import store from '@/store'

export default {
  name: 'home',
  data() {
    return {
      username: 'User'
    }
  },
  created() {
    this.username = getLoginUser().userName;
  },
  methods: {
    handleCommand(cmd) {
      this[cmd]();
    },
    logout() {
      logout().then(() => {
        removeLoginUser();
        store.dispatch('clearMenuList');
        this.$router.push('/login');
      });
    }
  },
  computed: mapState({
    menuList: state => state.menu.menuList
  })
}
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  border-bottom: thin dotted #B3C0D1;
  text-align: right;
  font-size: 12px;
  height: 50px;
  padding-top: 4px;
}

.el-aside {
  background-color: #545c64;
  color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}

::v-deep .el-menu {
  border-right: solid 0px #545c64;
  text-align: left;
}
</style>
